---
import Layout from '../../layouts/Layout.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
import AppWrapper from '../../components/vue/AppWrapper.vue';
import ShareButton from '../../components/vue/ShareButton.vue';
import stacksData from '../../data/stacks.json';

export function getStaticPaths() {
  return stacksData.stacks.map(stack => ({
    params: { id: stack.id },
    props: { stack }
  }));
}

const { stack } = Astro.props;
const pageUrl = Astro.url.href;
const shareTitle = `${stack.name} - Vibery`;
const shareDescription = stack.description;

// Type info for badges
const typeInfo: Record<string, { icon: string; color: string }> = {
  agent: { icon: 'ph-robot', color: 'blue' },
  command: { icon: 'ph-terminal', color: 'green' },
  mcp: { icon: 'ph-plugs-connected', color: 'orange' },
  hook: { icon: 'ph-webhooks-logo', color: 'yellow' },
  setting: { icon: 'ph-gear', color: 'purple' },
  skill: { icon: 'ph-sparkle', color: 'pink' }
};
---

<Layout title={`${stack.name} - Vibery`}>
  <Header />
  <main class="min-h-screen bg-warm-bg-deep pt-24 pb-12 px-4">
    <div class="max-w-4xl mx-auto">
      <!-- Breadcrumb -->
      <div class="mb-6">
        <a href="/" class="text-warm-text-tertiary hover:text-warm-accent text-sm inline-flex items-center gap-1">
          <i class="ph ph-arrow-left"></i> Back to Home
        </a>
      </div>

      <!-- Header -->
      <div class="flex items-start justify-between gap-4 mb-8">
        <div class="flex items-start gap-4">
          <div class="w-14 h-14 rounded-warm bg-warm-accent/10 flex items-center justify-center shrink-0">
            <i class={`ph-bold ${stack.icon || 'ph-stack'} text-2xl text-warm-accent`}></i>
          </div>
          <div>
            <h1 class="text-2xl font-bold text-warm-text-primary">{stack.name}</h1>
            <p class="text-warm-text-secondary mt-1">{stack.description}</p>
            <div class="flex items-center gap-2 mt-3">
              <span class="badge-stack">stack</span>
              <span class="px-2 py-0.5 rounded-full text-xs bg-warm-bg-elevated text-warm-text-tertiary">
                {stack.templates.length} templates
              </span>
            </div>
          </div>
        </div>

        <ShareButton
          client:load
          title={shareTitle}
          text={shareDescription}
          url={pageUrl}
        />
      </div>

      <!-- Install Command -->
      <div class="bg-warm-bg-surface border border-warm-border-subtle rounded-warm p-6 mb-8">
        <h2 class="text-lg font-semibold text-warm-text-primary mb-4">Install Stack</h2>
        <div class="flex gap-2">
          <code class="flex-1 bg-warm-bg-deep px-4 py-3 rounded font-mono text-sm text-warm-accent overflow-x-auto">
            npx vibery install --stack {stack.id}
          </code>
          <button
            class="btn-primary stack-copy-btn shrink-0"
            data-command={`npx vibery install --stack ${stack.id}`}
            aria-label="Copy install command"
          >
            <i class="ph ph-copy"></i>
          </button>
        </div>
      </div>

      <!-- Templates in Stack -->
      <div class="bg-warm-bg-surface border border-warm-border-subtle rounded-warm p-6 mb-8">
        <h2 class="text-lg font-semibold text-warm-text-primary mb-4 flex items-center gap-2">
          <i class="ph ph-package text-warm-accent"></i>
          Templates ({stack.templates.length})
        </h2>
        <ul class="space-y-2">
          {stack.templates.map((tpl: { type: string; name: string }) => {
            const info = typeInfo[tpl.type] || { icon: 'ph-file', color: 'gray' };
            return (
              <li class="flex items-center gap-3 px-3 py-2 bg-warm-bg-elevated border border-warm-border-subtle rounded-lg hover:border-warm-accent/50 transition-colors">
                <a href={`/templates/${tpl.type}s/${tpl.name}`} class="flex items-center gap-3 flex-1">
                  <div class={`w-7 h-7 rounded-md bg-${info.color}-500/10 flex items-center justify-center flex-shrink-0`}>
                    <i class={`ph ${info.icon} text-${info.color}-400 text-sm`}></i>
                  </div>
                  <span class="font-mono text-sm text-warm-text-primary flex-1">{tpl.name}</span>
                  <span class={`badge-${tpl.type} text-2xs`}>{tpl.type}</span>
                </a>
              </li>
            );
          })}
        </ul>
      </div>

      <!-- Credits -->
      {stack.credits && (
        <div class="text-sm text-warm-text-tertiary italic border-t border-warm-border-subtle pt-4 mb-8">
          {stack.credits}
        </div>
      )}

      <!-- Tags -->
      {stack.tags && (
        <div class="flex flex-wrap gap-2">
          {stack.tags.map((tag: string) => (
            <span class="text-sm text-warm-text-muted">#{tag}</span>
          ))}
        </div>
      )}
    </div>
  </main>
  <Footer />
  <AppWrapper client:only="vue" />
</Layout>

<script>
  document.querySelectorAll('.stack-copy-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const command = (btn as HTMLElement).dataset.command;
      navigator.clipboard.writeText(command || '').then(() => {
        const icon = btn.querySelector('i');
        icon?.classList.remove('ph-copy');
        icon?.classList.add('ph-check');
        setTimeout(() => {
          icon?.classList.remove('ph-check');
          icon?.classList.add('ph-copy');
        }, 2000);
      });
    });
  });
</script>